<!--

 * @Description: 关联交易配置
-->
<template>
  <page-view>
    <template #form>
      <SearchForm :data-form="formInLine" @on-search="onSearch" @onReset="onSearch">
        <el-form-item prop="year">
          <el-date-picker v-model="formInLine.year" type="year" value-format="YYYY"
            placeholder="请选择年份"></el-date-picker>
        </el-form-item>
        <el-form-item prop="name">
          <el-input v-model="formInLine.name" placeholder="请输入名称" />
        </el-form-item>
      </SearchForm>
    </template>
    <template v-if="isAction" #option>
      <div class="btn-box">
        <el-button v-auth="'RelatedTransaction:add'" type="primary" @click="onAdd">新增</el-button>
        <FsButton v-auth="'RelatedTransaction:enable'" :disabled="selectList.length == 0" type="primary"
          @click="onBatchEnable">启用</FsButton>
        <FsButton v-auth="'RelatedTransaction:disable'" :disabled="selectList.length == 0" type="primary"
          @click="onBatchDisable">停用</FsButton>
        <FsButton v-auth="'RelatedTransaction:del'" :disabled="selectList.length == 0" type="primary"
          @click="onBatchDel">删除</FsButton>
      </div>
    </template>
    <template #table="tableScope">
      <PubilcTable :table-data="tableData" show-select show-index is-slot @on-selectChange="onSelectChange"
        :tableHeight="tableScope.tableHeight" :page-data="pageData" @on-action="onAction">
        <el-table-column type="selection" width="40" align="center" />
        <el-table-column label="序号" type="index" width="60" />
        <el-table-column label="年份" prop="belongYear" min-width="90" />
        <el-table-column label="名称" prop="configName" min-width="300" />
        <el-table-column label="状态" prop="enableStatus" min-width="80">
          <template #default="{ row }">
            {{ row.enableStatus ? '启用' : '停用' }}
          </template>
        </el-table-column>
        <el-table-column label="创建人" prop="createUser" min-width="80" />
        <el-table-column label="创建时间" prop="createTime" min-width="160" :formatter="$datetimeFormatter" />
        <el-table-column v-if="isOperate" label="操作" prop="id" width="260" fixed="right">
          <template #default="{ row, $index }">
            <el-button v-auth="'RelatedTransaction:view'" type="primary" link
              @click="onView(row, $index)">查看</el-button>
            <el-button v-auth="'RelatedTransaction:edit'" type="primary" link
              @click="onEdit(row, $index)">编辑</el-button>
            <el-button v-if="!row.enableStatus" type="primary" v-auth="'RelatedTransaction:enable'" link
              @click="onEnable(row, $index)">启用</el-button>
            <el-button v-else v-auth="'RelatedTransaction:disable'" type="primary" link
              @click="onDisable(row, $index)">停用</el-button>
            <el-button v-auth="'RelatedTransaction:del'" type="primary" link :disabled="row.enableStatus"
              @click="onDel(row, $index)">删除</el-button>
            <el-button v-auth="'RelatedTransaction:copy'" type="primary"  link
              @click="onCopy(row, $index)">复制</el-button>
          </template>
        </el-table-column>
      </PubilcTable>
    </template>
    <TransactionForm v-model="visible" :data="currentData" @success="onSearch" />
  </page-view>
</template>
<script setup name="RelatedTransaction">
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
import * as relatedApi from '@/api/Reimbursement/related-transaction.js'
import TransactionForm from './components/transaction-form.vue'
import {  hasPermission } from '@fssc/admin'


const isOperate = hasPermission(['RelatedTransaction:view', 'RelatedTransaction:edit', 'RelatedTransaction:enable', 'RelatedTransaction:disable', 'RelatedTransaction:del', 'RelatedTransaction:copy'])
const isAction = hasPermission(['RelatedTransaction:add', 'RelatedTransaction:enable', 'RelatedTransaction:disable', 'RelatedTransaction:del'])

let router = useRouter();
const formInLine = ref({
  year: '',
  name: '',
})

const pageData = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0
})
const selectList = ref([])
const tableData = ref([])
const onSearch = () => {
  selectList.value = []
  const params = { ...formInLine.value, ...pageData }
  relatedApi.relatedTransactionPage(params).then((res) => {
    tableData.value = res.list || []
    pageData.total = res.total || 0
  })
}

const onAction = ([item, row]) => {
  const obj = {
    'pageNum': onSearch,
    'pageSize': onSearch
  }
  if (typeof item === 'string') {
    pageData[item] = row
    if (item === 'pageSize') pageData.pageNum = 1
    obj[item]()
  } else {
    obj[item.alias](row)
  }
}

const onSelectChange = (list) => {
  selectList.value = list
}

const requestDel = async (ids) => {
  await relatedApi.relatedTransactionBatchDel(ids)
  onSearch()
}

const requestStatusChange = async (ids, enableStatus) => {
  await relatedApi.relatedTransactionBatchStatus({ ids, enableStatus })
  onSearch()
}

const visible = ref(false)
const currentData = ref()

const onAdd = () => {
  currentData.value = {
    type: 'add',
    data: {}
  }
  visible.value = true
}

const onBatchEnable = async ({ done }) => {
  try {
    if (selectList.value.some(item => item.enableStatus)) {
      ElMessage.warning('启用数据无法启用')
      done()
      return
    }
    await ElMessageBox.confirm(`您确定启用${selectList.value.length}条数据吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    requestStatusChange(selectList.value.map(item => item.id), true)
  } catch (e) {
    console.log(e)
  }
  done()
}

const onBatchDisable = async ({ done }) => {
  try {
    if (selectList.value.some(item => !item.enableStatus)) {
      ElMessage.warning('停用数据无法停用')
      done()
      return
    }
    await ElMessageBox.confirm(`您确定停用${selectList.value.length}条数据吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    requestStatusChange(selectList.value.map(item => item.id), false)
  } catch (e) {
    console.log(e)
  }
  done()
}

const onBatchDel = async ({ done }) => {
  try {
    if (selectList.value.some(item => item.enableStatus)) {
      ElMessage.warning('启用数据无法删除')
      done()
      return
    }
    await ElMessageBox.confirm(`您确定删除${selectList.value.length}条数据吗？删除后将不可恢复。`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    requestDel(selectList.value.map(item => item.id))
  } catch (e) {
    console.log(e)
  }
  done()
}

const onView = (row, index) => {
  router.push({
    name: `TransactionProject`,
    params: {
      type: 'view',
      id: row.id
    }
  })
}
const onEdit = (row, index) => {
  router.push({
    name: `TransactionProject`,
    params: {
      type: 'edit',
      id: row.id
    }
  })
}
const onEnable = (row, index) => {
  ElMessageBox.confirm(`您确定要进行启用操作吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    requestStatusChange([row.id], true)
  })
}
const onDisable = (row, index) => {
  ElMessageBox.confirm(`您确定要进行停用操作吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    requestStatusChange([row.id], false)
  })
}
const onDel = async (row, index) => {
  await ElMessageBox.confirm(`您确定要进行删除操作吗？删除后将不可恢复。`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  requestDel([row.id])
}
const onCopy = (row, index) => {
  currentData.value = {
    type: 'copy',
    data: row,
  }
  visible.value = true
}

onSearch()
</script>

<style lang="scss" scoped></style>
